<template>

    <div class="paying-stock">
        <div class="order-payment-close" @click="close()"><svg-icon name="dialog-close-medium" /></div>
        <p>Discontinued products in order</p>

        <h3>
            <span>Product</span>
            <span>Color/Size</span>
            <span>Design side</span>
            <span>Price</span>
        </h3>

        <ul>
            <li v-for="(item, index) in stocks" :key="index">

                <div class="table-model">
                    <CommonTemplatePreview :models="getModelPreview(item)" :baseColor="item" />
                </div>

                <div class="table-info">
                    <h4 v-text="item.title"></h4>
                    <p>
                        <span>Color:</span>
                        <em :style="{ background: item.color_num }"></em>
                    </p>
                    <p>
                        <span>Size:</span>
                        <strong v-text="item.size"></strong>
                    </p>
                </div>

                <div class="table-design">
                    <CommonSurfacePreview :design="getModelDesign(item)" />
                </div>

                <div class="table-cost">
                    <span v-text="'USD ' +(parseFloat(item.price / 100) || 0).toFixed(2)"></span>
                </div>

            </li>

        </ul>

    </div>

</template>
<script>
export default {
    props: {
        stocks: { type: Array, default: () => [] }
    },
    data () {
        return {
        };
    },

    methods: {
        close () {
            this.$emit('close', null)
        },
        getModelPreview (item) {
            const list = item.model_img || '[]'
            if (Array.isArray(list)) {
                return list
            } else {
                try {
                    return JSON.parse(list)
                } catch (error) {
                    return []
                }
            }
        },
        getModelDesign (item) {
            const list = item.design_info || '[]'

            if (Array.isArray(list)) {
                return list
            } else {
                try {
                    return JSON.parse(list)
                } catch (error) {
                    return []
                }
            }
        }

    },

};
</script>
<style lang="scss" scoped>
.order-payment-close {
    z-index: 1;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: all 0.3s;
    cursor: pointer;
    border-radius: 4px;
    svg {
        width: 10px;
        height: 10px;
    }
    &:hover {
        background-color: rgba(255, 0, 0, 0.1);
        color: #8c1c14;
    }
}

.paying-stock {
    position: relative;
    width: 902px;
    box-sizing: border-box;
    padding: 26px 16px 16px;
    background: #f8f8f8;

    & > p {
        text-align: center;
        font-size: 24px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 400;
        color: #292929;
        line-height: 32px;
    }

    & > h3 {
        display: flex;
        align-items: center;
        height: 40px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e6e6e6;
        margin-top: 22px;

        span {
            width: 25%;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 400;
            color: #292929;
            text-align: center;
        }
    }

    li {
        display: flex;
        align-items: center;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e6e6e6;
        margin-top: 10px;
        & > div {
            width: 25%;
            box-sizing: border-box;
            padding: 18px;
        }
    }

    .table-model {
        .template-preview {
            width: 160px;
            height: 160px;
        }
    }

    .table-info {
        display: flex;
        flex-direction: column;
        align-items: center;

        & > h4 {
            font-size: 14px;
            font-family: Roboto, Roboto;
            font-weight: 400;
            color: #000000;
            white-space: wrap;
            line-height: 22px;
            margin-bottom: 6px;
        }
        p {
            margin: 8px 0 0;
            min-width: 80px;
            line-height: 20px;
            font-size: 14px;
            color: #666666;
            display: flex;
            align-items: center;
            span {
                font-size: 14px;
                font-family: Roboto, Roboto;
                font-weight: 400;
                color: #000000;
                line-height: 16px;
                width: 44px;
                white-space: nowrap;
                text-align: right;
                margin-right: 10px;
            }
            strong {
                font-weight: normal;
            }
            em {
                width: 24px;
                height: 24px;
                border-radius: 2px;
                border: 1px solid rgba(0, 0, 0, 0.2);
            }
        }
    }
    .table-design {
        font-size: 14px;

        color: #666666;
        line-height: 16px;
        p {
            height: 26px;
            font-size: 14px;

            color: #666666;
            line-height: 26px;
            background: none;
            border: none;
            white-space: nowrap;
        }
    }

    .table-cost {
        text-align: center;
        font-size: 14px;
        font-family: Roboto;
        font-weight: 400;
        color: #292929;
        line-height: 18px;
    }
}
</style>
